<template>
  <div class="organization_max">
    <div class="left_company scrollbar_btf">
      <div class="search_head">
        <el-input
          clearable
          placeholder="输入关键字进行过滤"
          v-model="filterText"
        ></el-input>
      </div>
      <el-tree
        :data="treeDataList"
        node-key="id"
        ref="OrganizationTree"
        :expand-on-click-node="false"
        :filter-node-method="filterNode"
        default-expand-all
      >
        <div
          slot-scope="{ data }"
          v-contextmenu="() => dirMenus(data)"
          :data-ctxid="data.id"
          class="node_item ac"
          @click="getOrganUserList(data.id)"
        >
          <img v-if="data.code" src="@/assets/subfile.png" />
          <img v-else src="@/assets/masterFile.png" />
          <span style="margin-left: 6px"> {{ data.name }} </span>
        </div>
      </el-tree>
    </div>
    <div class="right_user_list">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="userName" label="用户名"></el-table-column>
        <el-table-column prop="realName" label="真实名"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button size="small" type="info" @click="resetPassword(row)"
              >重置密码</el-button
            >
            <el-button size="small" type="primary" @click="editUser(row)"
              >编辑</el-button
            >
            <el-button size="small" type="danger" @click="deleteUser(row)"
              >解绑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <EditOrganizationDialog
      :show.sync="organizaEditShow"
      :pid="pid"
      :editId="editId"
      :addPid="selectPid"
      @change="getLeftTreeList"
    />
    <EditAddUserDialog
      :show.sync="showAddUser"
      :editUserId="editUserId"
      :selectPid="selectPid"
      @change="getItemUser"
    />
  </div>
</template>

<script>
import { axiosUtil } from '@/utils/tools/authorityApi/axiosUtil'
import authorityApi from '@/utils/tools/authorityApi/index.js'
import { getOrganizeTreeList, getUserListByOrganize } from '@/apiList/api_power'
import EditOrganizationDialog from './EditOrganizationDialog.vue'
import EditAddUserDialog from './EditAddUserDialog.vue'
import apiConfig from '@/utils/tools/authorityApi/apiConfig'
import { user_relieve } from '@/apiList/apiWorkCZR'

export default {
  name: 'organization',
  components: {
    EditOrganizationDialog,
    EditAddUserDialog
  },
  data() {
    return {
      showAddUser: false,
      organizaEditShow: false,
      filterText: '',
      selectPid: '',
      editId: '',
      editUserId: '',
      tableData: [],
      busInfoList: [],
      treeDataList: [],
      // 新增pid
      pid: ''
    }
  },
  watch: {
    filterText(val) {
      this.$refs.OrganizationTree.filter(val)
    }
  },
  created() {
    this.getLeftTreeList()
  },
  methods: {
    getLeftTreeList() {
      getOrganizeTreeList().then((res) => {
        this.treeDataList = res
      })
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    dirMenus(menu) {
      if (menu.hierarchy == '/') {
        this.pid = menu.id
      } else {
        this.pid = ''
      }
      return [
        {
          text: '新增公司',
          hide: menu.hierarchy != '/',
          handler: (el) => {
            this.editId = ''
            this.selectPid = el.getAttribute('data-ctxid')
            this.organizaEditShow = true
          }
        },
        {
          text: '新增用户',
          hide: menu.hierarchy == '/',
          handler: (el) => {
            this.editId = ''
            this.editUserId = ''
            this.selectPid = el.getAttribute('data-ctxid')
            this.showAddUser = true
          }
        },
        {
          text: '编辑公司',
          hide: menu.hierarchy == '/',
          handler: (el) => {
            this.editUserId = ''
            this.editId = el.getAttribute('data-ctxid')
            this.organizaEditShow = true
          }
        },
        {
          text: '删除公司',
          hide: menu.hierarchy == '/',
          handler: (el) => {
            this.deleteOrganiza(el.getAttribute('data-ctxid'))
          }
        }
      ]
    },
    getOrganUserList(nodeId) {
      this.selectPid = nodeId
      this.getItemUser()
    },
    getItemUser() {
      getUserListByOrganize(this.selectPid).then((res) => {
        this.tableData = res
      })
    },
    async deleteOrganiza(id) {
      await this.$confirm(
        '此操作将永久删除当前机构和所有子级机构, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )

      authorityApi.OrganizationPort.deleteOrganization({ id }, (res) => {
        this.$message.success(res)
        this.getLeftTreeList()
      })
    },
    // 编辑用户
    editUser(row) {
      this.editUserId = row.id
      this.showAddUser = true
    },
    // 解绑用户
    async deleteUser(row) {
      await this.$confirm('此操作将解绑该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      await user_relieve({ id: row.id })
      this.$message.success('解绑成功')
      this.getItemUser(this.selectPid)
    },
    async resetPassword(row) {
      const res = await this.$prompt('输入新密码!', '提示', {
        closeOnClickModal: false,
        inputValidator: (v) => !!v,
        inputErrorMessage: '请输入新密码'
      })
      if (!res.value) {
        console.log('内容为空')
        return
      }
      axiosUtil.postJson(
        apiConfig.API.sysUserApi.resetUser,
        { id: row.id, newPassWord: res.value },
        (res) => {
          this.$message.success('密码重置成功')
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.organization_max {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: calc(97vh - 150px);
  .left_company {
    height: 100%;
    overflow-y: scroll;
    background-color: #fff;
    /deep/ .el-tree-node__content {
      height: 32px;
    }
    .search_head {
      padding: 16px;
    }
  }
  .node_item {
    width: 100%;
    height: 100%;
  }
  .right_user_list {
    height: 100%;
    overflow-y: scroll;
  }
}
</style>
